<!-- 老师端 表单上传 -->
<template>
  <uv-status-bar bgColor="#ff7a66"></uv-status-bar>
  <ls-navbar :title="`${routerVal?.id ? '修改' : '发布'}课程`"></ls-navbar>
  <cover v-if="coverDom.width" ref="coverRef" v-model="lessonModel.cover" :coverDom="coverDom" :dragPosition="dragPosition" />
  <view class="lesson">
    <uv-form
      :model="lessonModel"
      :rules="rules"
      ref="formRef"
      :borderBottom="false"
      :labelStyle="{ color: '#fff' }"
      labelWidth="163rpx"
      class="lesson-fill"
    >
      <uv-form-item label="">
        <view class="lesson-mp4">
          <view> MP4 </view>
          <view class="lesson-mp4-file" @click="onModalVideo">
            <view class="lesson-mp4-file-button" @click.stop="onChangeVideo" v-if="!purchasedData">上传视频</view>
            <video
              :src="lessonModel.videoPath"
              class="lesson-mp4-file-video"
              :show-play-btn="false"
              :show-center-play-btn="false"
              :show-fullscreen-btn="false"
              :controls="false"
              object-fit="fill"
              v-if="lessonModel.videoPath"
            ></video>
          </view>
          <view class="lesson-mp4-cover">
            <view class="lesson-mp4-cover-content" @click="onModalCover">
              <view class="lesson-mp4-file-button lesson-mp4-cover-content-button" @click.stop="onChooseImage" v-if="!purchasedData">上传封面</view>
              <uv-image
                :src="lessonModel.cover"
                mode="widthFix"
                class="lesson-mp4-cover-image"
                width="100%"
                height="100%"
                v-if="lessonModel.cover"
              ></uv-image>
              <view
                class="lesson-mp4-cover-share"
                :style="{ height: coverDom.width * (4 / 5) + 'px', top: dragPosition + 'px' }"
                @touchstart="startDrag"
                @touchmove="doDrag"
                @touchend="endDrag"
              ></view>
            </view>
            <view class="lesson-mp4-cover-info">建议上传封面，曝光更高。虚线框内转发封面</view>
          </view>
        </view>
      </uv-form-item>
      <uv-form-item label="课程名称" prop="lessonName" required>
        <uv-input v-model="lessonModel.lessonName" :disabled="purchasedData" border="none" placeholder="请输入课程名称"></uv-input>
      </uv-form-item>
      <uv-form-item label="舞种" prop="danceType" @click="onSelectDance" required>
        <uv-input v-model="lessonModel.danceType" disabled placeholder="请选择舞种" border="none">
          <template v-slot:suffix>
            <uv-icon name="arrow-right" size="30"></uv-icon>
          </template>
        </uv-input>
      </uv-form-item>
      <uv-form-item label="人数">
        <!-- <uv-input v-model="lessonModel.traineeCount" border="none" type="number" @blur="onTraineeCount"></uv-input> -->
        <view class="lesson-fill-gather">
          <uv-input
            v-model.number="lessonModel.traineeCountMin"
            :disabled="purchasedData"
            border="none"
            type="number"
            @blur="onTraineeCount"
          ></uv-input>
          <view class="space">至</view>
          <uv-input
            v-model.number="lessonModel.traineeCountMax"
            :disabled="purchasedData"
            border="none"
            type="number"
            @blur="onTraineeCount"
          ></uv-input>
        </view>
      </uv-form-item>
      <uv-form-item label="节数" prop="classCount" required>
        <uv-input
          v-model="lessonModel.classCount"
          border="none"
          :disabled="purchasedData"
          placeholder="请输入节数"
          type="number"
          @blur="onClassCountChange"
        ></uv-input>
      </uv-form-item>
      <uv-form-item label="开课时间" prop="issues" required>
        <view style="width: 100%">
          <view v-for="(row, i) in lessonModel.issues" :key="i" @click="onClickDate(i)" class="lesson-fill-time">
            <uv-input v-model="row.time" border="none" disabled :placeholder="`请输入第${i + 1}节时间段`"> </uv-input>
          </view>
        </view>
      </uv-form-item>
      <uv-form-item label="上课地址" prop="address" @click="onChoiceAddress">
        <uv-input v-model="lessonModel.address" disabled placeholder="请选择课程地址" border="none">
          <template v-slot:suffix>
            <uv-icon name="arrow-right" size="30" v-if="!lessonModel.address"></uv-icon>
            <uv-icon name="close-circle" v-else color="#fff" size="30" @click.native.stop="onAddressClose"></uv-icon>
          </template>
        </uv-input>
      </uv-form-item>
      <uv-form-item label="详细地址" prop="detail">
        <uv-textarea v-model="lessonModel.detail" placeholder="请输入详细地址" border="none"> </uv-textarea>
      </uv-form-item>
      <!-- <uv-form-item label="手机号" prop="phone" required>
        <uv-input type="number" v-model="lessonModel.phone" placeholder="方便用户联系" border="none"> </uv-input>
      </uv-form-item> -->
      <uv-form-item label="课程费用" prop="price" required>
        <uv-input
          v-model="lessonModel.price"
          placeholder="请输入课程费用"
          :disabled="purchasedData"
          type="number"
          border="none"
          @change="onPriceChange"
        >
          <template v-slot:prefix>
            <text>￥</text>
          </template>
        </uv-input>
      </uv-form-item>
      <uv-form-item label="课程介绍" prop="gradeDesc">
        <view class="lesson-introduce">
          <view class="lesson-introduce-item">
            <view class="lesson-introduce-item-title">课程难度:</view>
            <uv-input v-model="lessonModel.gradeDesc" border="none" :disabled="purchasedData" placeholder="添加描述"></uv-input>
          </view>
          <view class="lesson-introduce-item">
            <view class="lesson-introduce-item-title">适合学员:</view>
            <uv-input v-model="lessonModel.suitable" border="none" :disabled="purchasedData" placeholder="添加描述"></uv-input>
          </view>
          <uv-divider text="" hairline></uv-divider>
          <view class="lesson-introduce-item">
            <uv-textarea
              v-model="lessonModel.description"
              border="none"
              :disabled="purchasedData"
              placeholder="请输入课程内容"
              class="lesson-introduce-item-textarea"
              id="item-textarea"
            ></uv-textarea>
          </view>
        </view>
      </uv-form-item>
      <uv-form-item label="注意事项" prop="attention">
        <uv-textarea v-model="lessonModel.attention" :disabled="purchasedData" placeholder="请输入注意事项" border="none"> </uv-textarea>
      </uv-form-item>

      <uv-form-item label="分享标题" prop="shareTitle" @click="onSelectShare">
        <uv-input v-model="lessonModel.shareTitle" disabled placeholder="未选择标题随机内容" border="none">
          <template v-slot:suffix>
            <uv-icon name="arrow-right" size="30" v-if="!lessonModel.shareTitle"></uv-icon>
            <uv-icon name="close-circle" v-else color="#fff" size="30" @click.native.stop="onColseShare"></uv-icon>
          </template>
        </uv-input>
      </uv-form-item>
    </uv-form>
    <uv-divider text=""></uv-divider>
    <uv-button type="error" text="确定" @click="onSubmit" shape="circle" :customStyle="{ backgroundColor: '#FF7A66' }"></uv-button>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
  <!-- 选择舞种 -->
  <uv-action-sheet ref="danceRef" :actions="danceList" title="请选择舞种" @select="onChangeDance"> </uv-action-sheet>
  <!-- 选择分享标题 -->
  <uv-action-sheet ref="shareRef" :actions="shareList" title="请选择分享标题" @select="onChangeShare"> </uv-action-sheet>
  <!-- 提示信息 -->
  <uv-toast ref="toastRef"></uv-toast>
  <!-- 日期 -->
  <uv-datetime-picker ref="dateRef" v-model="dateValue" mode="date" @confirm="onDateChange"> </uv-datetime-picker>
  <!-- 时间段 -->
  <uv-picker ref="pickerRef" title="选择时间段" :columns="timeColumns" :defaultIndex="timeDefaultIndex" @confirm="onTimeChange"></uv-picker>
  <uv-modal ref="modalRef" title="提示" showCancelButton content="确认删除？无法恢复!" @confirm="onFileConfirm"></uv-modal>
  <uv-modal ref="modalPriceRef" title="提示" showCancelButton content="当前费用为0，确认保存？" @confirm="httpSave"></uv-modal>
  <uv-preview-video ref="previewVideo"></uv-preview-video>
</template>
<script setup>
  import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import lsNavbar from './components/ls-navbar.vue';
  import cover from './components/cover.vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  import { reactive, ref, nextTick, getCurrentInstance } from 'vue';
  import { uploadFn, onLeft, isTimeNull } from '@/common/js/fn';
  import { shareList } from '@/common/js/global';
  import store from '@/store/index.js'; //需要引入store
  let { state, commit } = store;
  let lessonModel = reactive({
    timetableID: 0,
    danceID: undefined,
    danceType: '',
    lessonName: '',
    traineeCountMin: 1,
    traineeCountMax: 30,
    traineeCount: 30,
    classCount: 1,
    grade: 1,
    startDate: '',
    timeDuration: '', // 课程时间段 之前是pc在用的
    duration: 60,
    description: '',
    gradeDesc: '',
    suitable: '',
    price: 0,
    latitude: 0,
    logitude: 0,
    address: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    cover: '',
    videoPath: '',
    shareTitle: '',
    attention: '',
    issues: [],
    forwardCover: '',
    standby: '',
    phone: ''
  });
  let danceList = ref([]),
    toastRef = ref();

  let toastFn = (text, type = 'error') => {
    toastRef.value.show({
      overlay: false,
      message: text,
      type: type
    });
  };
  // 获取舞种
  const getDanceType = async () => {
    let dances = state.vuex_dances || [];
    // 如果没有的话
    if (!dances.length) {
      dances = await uni.$uv.http.post('app/setting/dances', {
        classify: 1
      });
      // 把数据存到vuex
      commit('$uStore', {
        name: 'vuex_dances',
        value: dances
      });
    }
    danceList.value = dances;
  };
  // #region 舞种
  let danceRef = ref();
  // 点击选择舞种
  const onSelectDance = async () => {
    if (purchasedData.value) return;
    await getDanceType();
    danceRef.value.open();
  };
  // 选中舞种项目
  const onChangeDance = val => {
    lessonModel.danceID = val.id;
    lessonModel.danceType = val.name;
  };
  let shareRef = ref();
  const onSelectShare = async () => {
    shareRef.value.open();
  };
  // 选中分享项目
  const onChangeShare = val => {
    lessonModel.shareTitle = val.name;
  };
  const onColseShare = () => {
    lessonModel.shareTitle = '';
  };
  // #endregion
  // #region 人数
  const onTraineeCount = () => {
    lessonModel.traineeCountMin = lessonModel.traineeCountMin || 1;
    lessonModel.traineeCountMax = lessonModel.traineeCountMax || 30;
    if (lessonModel.traineeCountMin > lessonModel.traineeCountMax) {
      lessonModel.traineeCountMin = 1;
      toastFn('人数最小值不能大于人数最大值');
    }
  };
  // #endregion
  // #region 节数
  const onClassCountChange = () => {
    lessonModel.classCount = Number(lessonModel.classCount);
    if (lessonModel.classCount < 1) {
      lessonModel.classCount = 1;
      toastFn('节数不能小于1');
    }
    lessonModel.issues = new Array(lessonModel.classCount).fill({}).map((r, i) => {
      return (
        lessonModel.issues[i] || {
          classTime: '',
          timeDuration: '',
          time: ''
        }
      );
    });
  };
  // #endregion
  // #region 时间
  let dateValue = ref(),
    dateIndex = ref(0);
  let dateRef = ref(),
    pickerRef = ref(),
    timeColumns = ref([]),
    timeDefaultIndex = ref();

  // 点击开始结束切换
  const onClickDate = index => {
    if (purchasedData.value) return;
    let val = lessonModel.issues[index];
    // dateValue.value = dayjs(lessonModel.issues[index].time?.split(':')[0]).format('YYYY-MM-DD');
    dateValue.value = val?.classTime || dayjs().format('YYYY-MM-DD');
    dateIndex.value = index;
    // 弹窗组件有bug。没办法此处加一个这个
    nextTick(() => {
      dateRef.value.open();
    });
  };
  // 确认选了什么时间
  const onDateChange = val => {
    lessonModel.issues[dateIndex.value].classTime = dayjs(val.value).format('YYYY-MM-DD');
    // 选了日期之后，弹出时间选择框
    nextTick(() => {
      onClickTime();
    });
  };
  // 选择时间段
  const onClickTime = () => {
    if (!timeColumns.value.length) {
      let hours = [],
        minutes = [];
      for (let hour = 0; hour <= 23; hour++) {
        hours.push((hour + '').padStart(2, '0'));
      }
      for (let minute = 0; minute <= 59; minute++) {
        minutes.push((minute + '').padStart(2, '0'));
      }
      timeColumns.value = [hours, minutes, hours, minutes];
    }
    // 如果没有选择时间段的话，默认开始当前时间，时间是1个小时
    timeDefaultIndex.value = [dayjs().hour(), dayjs().minute(), dayjs().add(1, 'h').hour(), dayjs().minute()];
    pickerRef.value.open();
  };
  // 选中时间段
  const onTimeChange = ({ value }) => {
    let date = `${value[0]}:${value[1]}-${value[2]}:${value[3]}`;
    lessonModel.duration = 0; // 这个字段暂时废弃

    let val = lessonModel.issues[dateIndex.value];
    val.timeDuration = date;
    val.time = val.classTime + ' ' + date;
  };
  // #endregion

  // #region 选择地址
  function parseAddress(address) {
    let arr = address.match(/.+?(省|市|自治区|自治州|县|区)/g).splice(0, 3);
    // 解决直辖市的问题
    if (arr.length === 2) {
      arr[2] = arr[1];
      arr[1] = '市辖区';
    }
    return {
      province: arr[0],
      city: arr[1],
      district: arr[2],
      detail: address.replace(arr[0], '').replace(arr[1], '').replace(arr[2], '').trim()
    };
  }
  let isAdminClear = ref(false);
  const onAddressClose = () => {
    isAdminClear.value = true;
    lessonModel.address = '';
  };
  // 选择地址的回调
  const onChoiceAddress = () => {
    if (isAdminClear.value) {
      isAdminClear.value = false;
      return;
    }
    uni.chooseLocation({
      success: ({ name, latitude, address, longitude }) => {

        lessonModel.latitude = latitude;
        lessonModel.logitude = longitude;
        let obj = parseAddress(address);
        ['province', 'city', 'district'].map(r => {
          lessonModel[r] = obj[r];
        });
        lessonModel.address = obj.province + obj.city + obj.district;
        lessonModel.detail = `${obj.detail} ${name}`;
      },
      fail: err => {
      }
    });
  };
  // #endregion

  // #region 文件操作

  // 拦截上传
  let modalRef = ref();
  const httpUpload = async event => {
    try {
      const result = await uploadFn(event.tempFilePath);
      lessonModel.videoPath = result;
    } catch (error) {
      toastFn('上传失败');
    }
  };
  const onChooseImage = () => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], //从相册选择
      success: async event => {
        try {
          const result = await uploadFn(event.tempFilePaths[0]);
          lessonModel.cover = result;
        } catch (error) {
          toastFn('上传失败');
        }
      }
    });
  };
  // 视频操作
  const onChangeVideo = () => {
    uni.chooseVideo({
      sourceType: ['album'],
      success: res => {
        httpUpload(res);
      }
    });
  };
  // 预览封面
  const onModalCover = () => {
    uni.previewImage({
      urls: [lessonModel.cover]
    });
  };
  // 预览视频
  let previewVideo = ref();
  const onModalVideo = () => {
    previewVideo.value.open(lessonModel.videoPath);
  };
  // #endregion
  // #region 表单 保存
  let formRef = ref(),
    rules = reactive({
      lessonName: [{ required: true, message: '此为必填字段', trigger: ['blur', 'change'] }],
      danceType: [{ required: true, message: '此为必填字段', trigger: ['blur', 'change'] }],
      classCount: [{ required: true, type: 'number', message: '此为必填字段', trigger: ['blur', 'change'] }],
      timeDuration: [{ required: true, message: '此为必填字段', trigger: ['blur', 'change'] }],
      price: [{ required: true, type: 'number', message: '此为必填字段', trigger: ['blur', 'change'] }],
      phone: [
        { required: true, message: '此为必填字段', trigger: ['blur', 'change'] },
        {
          asyncValidator: (rule, value, callback) => {
            if (!uni.$uv.test.mobile(value)) {
              // callback(new Error('请输入正确的手机号'));
              return;
            }
            callback();
          }
        }
      ],
      issues: [
        {
          // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
          validator: (rule, value, callback) => {
            return !lessonModel.issues.find(r => !r.timeDuration);
          },
          message: '请选择时间',
          trigger: ['blur']
        },
        {
          // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
          validator: (rule, value, callback) => {
            for (let i = 1; i < lessonModel.issues.length; i++) {
              if (!dayjs(lessonModel.issues[i].classTime).isAfter(dayjs(lessonModel.issues[i - 1].classTime), 'day')) {
                return false;
              }
            }
            return true;
          },
          message: '请检查日期，不能后面的时间在前面！',
          trigger: ['blur']
        }
      ]
    });
  let coverRef = ref();
  // 保存表单
  const httpSave = async () => {
    let params = JSON.parse(JSON.stringify(lessonModel));
    // 转发封面
    if (params.cover && params.standby !== dragPosition.value) {
      params.forwardCover = await coverRef.value.extendCanvas();
    }
    params.standby = dragPosition.value + '';
    params.price = params.price * 100;
    let alterType = 'all';
    // 如果是修改
    if (routerVal.value.id) {
      alterType = purchasedData.value ? 'address' : 'all';
    }
    params.alterType = alterType;
    await uni.$uv.http.post(`app/lesson/${routerVal.value.id ? 'update_publish' : 'publish'}`, params);
    toastFn('保存成功', 'success');
    setTimeout(() => {
      onLeft();
    }, 1000);
  };
  let modalPriceRef = ref();
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        if (lessonModel.price === 0) {
          modalPriceRef.value.open();
          return;
        }
        httpSave();
      })
      .catch(() => {
        toastFn('请检查必填项');
      });
  };
  // #endregion
  // 费用输入框
  const onPriceChange = () => {
    if (lessonModel.price < 0) {
      lessonModel.price = 0;
      toastFn('费用不能小于0');
    }
    lessonModel.price = Number(lessonModel.price);
  };

  let startY = ref(),
    dragPosition = ref(0);
  // #region 课程详情
  let routerVal = ref({});
  let coverDom = ref({});
  let purchasedData = ref(false);
  const httpLessonDetail = async () => {
    const {
      lesson,
      video,
      timeDuration,
      issueDate,
      attention,
      forwardCover,
      standby,
      issues = [],
      purchased,
      phone
    } = await uni.$uv.http.post('app/lesson/show', {
      id: routerVal.value.id
    });
    // 如果有人购买了，就不允许 修改其他的了，只能改地址
    purchasedData.value = !!purchased;
    if (purchasedData.value) {
      toastFn('提示，已经有用户购买了，部分选项不可修改', 'info');
    }
    let obj = {
      timetableID: routerVal.value.id,
      danceID: lesson.danceID,
      danceType: lesson.danceType,
      lessonName: lesson.name,
      traineeCountMin: lesson.minTraineeCount,
      traineeCountMax: lesson.traineeCountMax || lesson.traineeCount, // 因为这个字段曾经被废弃，如果没有max就取 traineeCount
      traineeCount: lesson.traineeCount,
      classCount: lesson.classCount,
      grade: lesson.grade,
      startDate: !isTimeNull(issueDate) ? dayjs(issueDate).format('YYYY-MM-DD') : '',
      timeDuration, // 课程时间段 之前是pc在用的
      duration: lesson.duration,
      description: lesson.abstract,
      gradeDesc: lesson.gradeDesc,
      suitable: lesson.suitable,
      price: lesson.price / 100,
      latitude: lesson.latitude,
      logitude: lesson.logitude,
      address: lesson.address,
      province: lesson.province,
      city: lesson.city,
      district: lesson.district,
      detail: lesson.detail,
      cover: video.cover,
      videoPath: video.address,
      shareTitle: lesson.shareTitle,
      attention,
      issues: [],
      phone
    };

    Object.keys(lessonModel).map(r => {
      lessonModel[r] = obj[r];
    });
    // 如果多选时间段没数据 && 老的时间段有数据，那就把老的数据给issues的第一个
    if (!issues.length) {
      lessonModel.issues = new Array(lessonModel.classCount).fill({}).map((r, i) => {
        return (
          lessonModel.issues[i] || {
            classTime: '',
            timeDuration: '',
            time: ''
          }
        );
      });
      lessonModel.issues[0].time = lessonModel.startDate ? `${lessonModel.startDate} ${lessonModel.timeDuration}` : '';
      lessonModel.issues[0].classTime = lessonModel.startDate;
      lessonModel.issues[0].timeDuration = lessonModel.timeDuration;
    } else {
      lessonModel.issues = issues.map(r => {
        let classTime = dayjs(r.classTime).format('YYYY-MM-DD');
        let { timeDuration } = r;
        return {
          classTime,
          timeDuration,
          time: `${classTime} ${timeDuration}`
        };
      });
    }
    if (standby) {
      dragPosition.value = lessonModel.standby = Number(standby);
    }
    lessonModel.forwardCover = forwardCover;
  };
  // #endregion
  const { ctx } = getCurrentInstance();
  onReady(async () => {
    formRef.value.setRules(rules);
  });
  onLoad(val => {
    nextTick(async () => {
      let { width, height } = await ctx.$uv.getRect('.lesson-mp4-cover-content');
      coverDom.value = { width: parseInt(width), height };
      dragPosition.value = parseInt(height / 2) - (coverDom.value.width * (4 / 5)) / 2;
    });
    lessonModel.phone = state.vuex_user.teacher?.phone;
    // 如果多选时间段没数据 && 老的时间段有数据，那就把老的数据给issues的第一个
    lessonModel.issues = [
      {
        classTime: '',
        timeDuration: '',
        time: ''
      }
    ];
    if (!val.id) return;
    routerVal.value = { id: Number(val.id) };
    httpLessonDetail();
  });
  // #region 拖拽选择转发封面
  // 开始拖拽
  const startDrag = e => {
    e.preventDefault();
    startY.value = e.touches[0].clientY;
  };
  // 拖拽中
  const doDrag = e => {
    throttle(() => {
      e.preventDefault();
      const currentY = e.touches[0].clientY;
      const deltaY = currentY - startY.value;
      dragPosition.value = dragPosition.value + deltaY;
      startY.value = currentY;
      if (dragPosition.value <= 0) dragPosition.value = 0;
      let height = coverDom.value.height - coverDom.value.width * (4 / 5);
      if (dragPosition.value >= height) dragPosition.value = height;
    }, 100);
  };
  // 结束拖拽
  const endDrag = () => {
    // 可以在这里添加拖动后的处理逻辑
  };
  // #endregion
</script>
<style lang="scss" scoped>
  .lesson {
    padding: 34rpx;
    background-color: #1d1f24;
    &-introduce {
      display: flex;
      flex-direction: column;
      background-color: #959595;
      border-radius: 19rpx;
      padding: 17rpx 21rpx;
      &-item {
        display: flex;
        align-items: center;
        color: #fff;
        #item-textarea {
          height: 314rpx;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }
    }
    &-mp4 {
      display: flex;
      flex-direction: column;
      width: 100%;
      color: #fff;
      font-size: 28rpx;
      position: relative;
      margin-bottom: 453rpx;
      text-align: center;
      &-file {
        width: 344rpx;
        height: 485rpx;
        background-color: #959595;
        border-radius: 19rpx;
        position: relative;
        overflow: hidden;
        margin-top: 35rpx;
        &-button {
          position: absolute;
          top: 21rpx;
          left: 50%;
          transform: translateX(-50%);
          padding: 17rpx 21rpx;
          border: 1px solid #fff;
          background-color: rgba(0, 0, 0, 0.78);
          border-radius: 19rpx;
          z-index: 9999;
        }
        &-video {
          width: 100%;
          height: 100%;
        }
      }
      &-cover {
        position: absolute;
        top: 40%;
        left: 115rpx;
        &-content {
          width: 520rpx;
          height: 734rpx;
          background-color: #545454;
          border-radius: 19rpx;
          overflow: hidden;
          position: relative;
          &-button {
            top: initial;
            position: absolute;
            bottom: 47rpx;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
          }
        }
        &-info {
          color: #cbcbcb;
          font-size: 24rpx;
          margin-top: 30rpx;
        }
        &-share {
          position: absolute;
          border: 1px dashed #000;
          box-sizing: border-box;
          width: 100%;
          z-index: 1;
          user-select: none;
          touch-action: none; /* 防止浏览器默认的滚动行为 */
        }
      }
    }
    &-fill {
      &-gather {
        display: flex;
        align-items: center;
        .space {
          margin: 0 26rpx;
          color: #fff;
        }
      }
      &-time {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 17rpx;
      }
      &-time:last-child {
        margin-bottom: 0;
      }
      :deep(.uv-input),
      :deep(.uv-textarea) {
        background-color: #959595 !important;
        border-radius: 19rpx;
        color: #fff;
        padding: 8.5rpx 17rpx !important;
        input,
        .uni-textarea-textarea,
        textarea {
          color: #fff !important;
        }
      }
    }
  }
  .upload {
    position: relative;

    &-title {
      position: absolute;
      bottom: 0rpx;
      // left: 50%;
      // transform: translateX(-50%);
      width: 100%;
      text-align: center;
      color: white;
      font-size: 35rpx;
      white-space: nowrap;
      background-color: #959595;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
    }
  }
</style>
